<template>
  <view class="most">
    <scroll-view
      scroll-y
      enable-flex
      @scrolltolower="toBottom"
      scroll-right
      class="video_main"
    >
      <view
        class="main_item"
        v-for="item in dataList"
        :key="item._id"
        @click="toPlay(item)"
      >
        <image :src="item.img" mode="widthFix" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "",
  props: {
    req: Object,
  },
  data() {
    return {
      dataList: [],
      getMore: true,
    };
  },

  created() {
    console.log(this.req);
    this.getList();
  },
  watch: {
    req() {
      //切换tab,数据发生变化重新发请求
      this.dataList = [];
      this.getMore = true;
      this.getList();
    },
  },
  methods: {
    async getList() {
      const { data } = await this.$request({
        url: this.req.url,
        data: this.req.params,
      });
      if (data.res.videowp.length == 0) {
        this.getMore = false;
        uni.showToast({
          title: "全部加载完毕",
          icon: "none",
        });
        return;
      }
      this.dataList = [...this.dataList, ...data.res.videowp];
      console.log(this.dataList);
    },
    toBottom() {
      if (this.getMore) {
        this.req.params.skip += this.req.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "全部加载完毕",
          icon: "none",
        });
      }
    },
    toPlay(item) {
      //存放在全局中
      /* const app = getApp();
      app.globalData.video = item; */
      this.$store.commit("playInfo", item);
      uni.navigateTo({
        url: "/pages/video/videoplay",
      });
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.video_main {
  height: calc(100vh - 72rpx);
  display: flex;
  flex-wrap: wrap;
  .main_item {
    flex: 33.33%;
    padding: 6rpx;
    image {
    }
  }
}
</style>
